<p id="blurb">
  System Status
</p>

<script type="text/javascript">
  $(function() {

	keepUpdating = true;
    var options = {
      xaxis: { mode: 'time' },
            legend: { show: true,
            	      container: null, 
            		  position: 'ne', 
            		  backgroundColor: '#DBBFFF', 
            		  backgroundOpacity: 0.5 }
    };

    var data = [];
    alreadyFetched = {};
    $.plot("#placeholder", data, options);

      function fetchData() {
        function onDataReceived(series) {
          var thePlot = [series.buffer[0], series.buffer[1]];
          $.plot("#placeholder", thePlot, options);
        }

      $.ajax({
        url: "/api/v1/system/status/list",
        type: "GET",
        dataType: "json",
        success: onDataReceived
      });

	  if(keepUpdating){
	  	setTimeout(fetchData, 10000);
	  }
    }

    setTimeout(fetchData, 1000);
  });
</script>  

<table class="table table-bordered">
  <thead>
  	<tr>
  	  <td><b>Device</b></td>
  	  <td><b>Size</b></td>
  	  <td><b>Used</b></td>
  	  <td><b>Avail</b></td>
  	  <td><b>Percent Used</b></td>
  	  <td><b>Mount</b></td>
  	</tr>
  </thead>
  
  <tbody>
<% diskusage.each do |i| %>
  	<tr>
  	  <td><%= i[:device] %></td>
  	  <td><%= i[:size] %></td>
  	  <td><%= i[:used] %></td>
  	  <td><%= i[:avail] %></td>
  	  <td><%= i[:use] %></td>
  	  <td><%= i[:mount] %></td>
  	</tr>
<% end %>
  </tbody>	
</table>
  
  
<div class="graph-container">
  <div id="placeholder" class="graph-placeholder"></div>
  
</div>
